import { messages } from "share/common";
import React, { Component } from "react";
import { openModal, removeContainer } from "components/method/openModal";
import { Modal, Button, Spin, message, Row, Col, Popover } from "antd";
import Space from "components/space";
import httpFetch from "share/httpFetch";
import Condition from "components/condition";

const { If, Else } = Condition;

class ExtraAttribute extends Component {
  state = {
    loading: false,
    info: {},
  };

  componentDidMount() {
    const { id } = this.props;
    this.setState({ loading: true });
    httpFetch
      .get(`/supplier/api/ven/bank/forms/values/${id}`)
      .then((res) => {
        this.setState({ loading: false, info: res.data });
      })
      .catch((e) => {
        message.error(e.response.data.message);
        this.setState({ loading: false });
      });
  }

  render() {
    const { visible, onCancel, afterClose } = this.props;
    const { loading, info } = this.state;
    return (
      <Modal
        title={messages("finance-4.key432") /*查看扩展字段*/}
        visible={visible}
        onCancel={onCancel}
        afterClose={afterClose}
        footer={[<Button onClick={onCancel}>{messages("common.cancel") /*取消*/}</Button>]}
      >
        <Spin spinning={loading}>
          <Space size={"middle"} direction={"vertical"} style={{ marginBottom: "32px" }}>
            <div>
              <Space size={"middle"}>
                <span style={{ width: "140px", display: "inline-block" }}>
                  {messages("finance-4.key28") /*银行账号*/}
                </span>
                <span>{info.bankAccount}</span>
              </Space>
            </div>
            <div>
              <Space size={"middle"}>
                <span style={{ width: "140px", display: "inline-block" }}>
                  {messages("finance-4.key29") /*银行户名*/}
                </span>
                <span>{info.bankName}</span>
              </Space>
            </div>
          </Space>
          <div className={"second-title"} style={{ marginBottom: "12px" }}>
            {messages("finance-4.key433") /*扩展字段*/}
          </div>
          <Condition>
            <If value={info.customFormValues && info.customFormValues.length > 0}>
              <Space size={"middle"} direction={"vertical"} style={{ overflowY: "auto", maxHeight: "200px" }}>
                {(info.customFormValues || []).map((item) => (
                  <Row gutter={12}>
                    <Col span={12}>
                      <Popover content={item.fieldName}>{item.fieldName}</Popover>
                    </Col>
                    <Col span={12}>
                      <Popover content={item.name || item.value || "-"}>{item.name || item.value || "-"}</Popover>
                    </Col>
                  </Row>
                ))}
              </Space>
            </If>
            <Else>
              <div className="forth-title">{messages("finance-4.key434") /*暂无扩展字段*/}</div>
            </Else>
          </Condition>
        </Spin>
      </Modal>
    );
  }
}

ExtraAttribute.open = function (env, props) {
  let container;
  const targetProps = {
    visible: true,
    onCancel: () => close(),
    afterClose: () => {
      removeContainer(container);
      container = null;
    },
    ...props,
  };
  function close() {
    let closeModal = () =>
      openModal(
        ExtraAttribute,
        {
          ...targetProps,
          visible: false,
        },
        env,
        container
      );
    closeModal();
  }
  container = openModal(ExtraAttribute, targetProps, env);
};

export default ExtraAttribute;
